<template>
	<div id="headerSimple" class="headerSimple">
		<x-header :left-options="{showBack: false}">
			<x-icon slot="overwrite-left" type="ios-arrow-back" size="16" class="backIcon" @click="goBack"></x-icon>
			<span slot="overwrite-left" style="color: white; font-weight: bold; font-size: 16px">{{title}}</span>
		</x-header>
	</div>
</template>

<script>
	import bus from '@/event/eventBus'
	import { XHeader } from 'vux'

	export default {
		name: 'top',
		components: {
			XHeader
		},
		data () {
			return {
				title: '引领右脑'
			}
		},
		created: function () {
			let _this = this
			bus.$on("setTopSimpleTitle", function (msg) {
				_this.title = msg
			})
		},
		methods: {
			goBack() {
				this.$router.go(-1)
			}
		}
	}
</script>

<style>

	.headerSimple > .vux-header > .vux-header-title {
		text-align: left;
		padding-left: 45px;
	}

	.vux-header {
		background-color: #44abe2 !important;
	}

	.headerSimple {
		width: 100%;
		position: fixed;
		left: 0px;
		top: 0px;
		z-index: 9999;
	}

	.backIcon {
		fill: #fff;
		position: relative;
		margin-right: 15px;
		top: 2px !important;
		left: 5px !important;
	}
</style>
